<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>微分销商户管理</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <style type="text/css">
        .sku {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="page-content" style="margin-top:-10px">
        <div class="page-header">
            <h2>
                温馨提示：
                <small>
                    商品添加/修改成功后，需要管理员审核通过后才能发布到会员推广商品列表
                </small>
            </h2>
        </div>
        <input type="hidden" id="id" th:value="${goods?.id}">
        <div class="widget-main">
            <table class="table table-bordered table-striped">
                <tbody>
                <tr>
                    <td align="right">
                        <span class="red">*</span><strong>商品名称：</strong>
                    </td>
                    <td>
                        <input type="text" id="goods_name" name="good_name" th:value="${goods?.name}">
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <span class="red">*</span><strong>排序号：</strong>
                    </td>
                    <td>
                        <input type="number" id="orderNum" name="orderNum" th:value="${goods?.orderNum}">
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>商品类型：</strong></td>
                    <td>
                        <select name="type_id" id="type_id" style="width:252px;font-size:14px" class="selectBox">
                            <option value="">请选择...</option>
                            <option th:each="goodsType:${goodsTypeList}"
                                    th:value="${goodsType.id}"
                                    th:text="${goodsType.name}"
                                    th:selected="${goods} != null and ${goods.goodsTypeId}==${goodsType.id}"></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"><strong>图片预览：</strong></td>
                    <td>
                        <div id="sm_div">
                            <img id="img" th:src="${goods?.pic}"
                                 style="width:240px;height:150px;border:1px solid #ddd;">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>上传图片：</strong></td>
                    <td>
                        <input type="file" name="file" id="file" style="width:540px;height:22px;cursor:hand"
                               class="fileinput" onchange="upload()">
                        <input type="hidden" id="filePath" th:value="${goods?.pic}"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>推广说明：</strong></td>
                    <td>
                        <textarea id="promote_desc" th:text="${goods?.promoteDesc}" name="promote_desc"
                                  style="width:540px; height: 160px;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span class="red">*</span><strong>商品套餐：</strong></td>
                    <td>
                        <table id="tcbg" class="table table-bordered table-striped">
                            <tbody>
                            <tr>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)描述
                                </th>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)成本
                                </th>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)价格
                                </th>
                                <th align="left" style="background-color:#F9F9F9">(<span style="color:red">*</span>)分成
                                </th>
                            </tr>
                            </tbody>
                        </table>
                        <div style="margin-top:10px">
                            <button class="btn btn-sm btn-primary" onclick="insertRows()">
                                <i class="icon-save"></i>
                                增加
                            </button>
                            <button class="btn btn-sm btn-danger" onclick="delRows()">
                                <i class="icon-save"></i>
                                删除
                            </button>
                            (<span style="color:red">提示信息：</span>上述所有输入项均为必填项目，请务必填入相应值后保存！)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <span onclick="save();" class="btn btn-lxg btn-primary">
                            <i class="icon-save bigger-120"></i>保存
                        </span>
                        <span onclick="backToGoodsList()" class="btn btn-lxg btn-undo">
                            <i class="icon-undo bigger-120"></i>返回
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>

<script type="text/javascript">
    function backToGoodsList() {
        reload(base + "goods/list");
    }


    var goods={
        "id" :null ,
        "goodsName" : null,
        "orderNum" : null,
        "typeId" : null,
        "img" : null,
        "filePath" :null,
        "file" : null,
        "promoteDesc":null,

    }

//添加单元格
    function insertRows() {
        var row = "<tr class=\"trSku\">"+
            "<td><input class=\"sku\"  data='title'/></td>"+
            "<td><input class=\"sku\"  data='cost'/></td>"+
            "<td><input class=\"sku\"  data='price'/></td>"+
            "<td><input class=\"sku\"  data='pmoney'/></td>"+
           "</tr>"
        //把row添加到 id为tcbg中的tbody里面
        $("#tcbg > tbody").append(row);


    }
    //删除tcbg下的tbody中的trSku  这里trSku是我们自己添加进去的 所以删除的也就是我们添加进去单元格
    function delRows() {
       var del =  $("#tcbg > tbody > .trSku");
       del.eq(del.length - 1).remove();
    }



    function save() {
        var goodsName = $("#goods_name").val(goods.goodsName);
        var orderNum = $("#orderNum").val(goods.orderNum);
        var typeId = $("#type_id").val(goods.typeId);
        var img = $("#img").val(goods.img);
        var filePath = $("#filePath").val(goods.filePath);
        var file = $("#file").val(goods.file);
        var promoteDesc = $("#promoteDesc").val(goods.promoteDesc);
        post("goods/save",goods,function (result) {

            console.log(resuly)
        })
    }



    function upload() {
    var file = document.getElementById("file").files[0];//为一个数组所以取第一个
    var fd = new FormData();//固定格式
    fd.append('file',file);//把数据拼接到file里面去  拼接到末尾
    $.ajax({
        url:base + 'goods/upload',//路径
        dataType : 'json',//格式
        type:'POST',//请求
        async:false,   //默认为true  false为同步，这个 testAsync()方法中的Ajax请求将整个浏览器锁死，
        data:fd,//数据
        processData:false,//固定格式   必须false才会避开jQuery对 formdata 的默认处理   XMLHttpRequest会对 formdata 进行正确的处理
        contentType:false,//固定格式   必须false才会自动加上正确的Content-Type
        success:function (result) { //数据在result里面
            if(result.ok){ //OK是判断是否成功
                $("#filePath").val(result.data);
                $("#img").attr("src",result.data);
            }
        }

    });

    }

</script>

</body>
</html>